<template>
    <el-form
        :model="settlementForm"
        ref="form"
        label-width="144px"
        class="ccui-form"
        :rules="rules"
    >
        <el-row :gutter="10">
            <el-col :span="12">
                <el-form-item
                    label="填报单位："
                    prop="contractName"
                    class="contractName"
                >
                    <span>{{ settlementForm.reportInOrgName }}</span>
                </el-form-item>
            </el-col>
            
            <el-col :span="12">
                <el-form-item label="结算期间：">
          <span>{{
            settlementForm.settlementStart + "至" + settlementForm.settlementEnd
          }}</span>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="10">
      <el-col :span="12">
        <el-form-item label="结算单名称：" prop="settlementName">
          <span>{{ settlementForm.settlementName }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="结算单编号：" prop="settlementCode">
          <span>{{ settlementForm.settlementCode }}</span>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="10">
      <el-col :span="12">
        <el-form-item label="合同编号：" prop="contractCode">
          <span>{{ settlementForm.contractCode }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="合同名称：" prop="contractName">
          <span>{{ settlementForm.contractName }}</span>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="10">
      <el-col :span="12">
        <el-form-item label="供应商：" prop="supplierName">
          <span>{{ settlementForm.supplierName }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="合同金额：" prop="contractMoney">
          <span>{{ settlementForm.contractMoney }}</span>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="10">
      <el-col :span="12">
        <el-form-item label="结算金额：" prop="currSetMoney">
          <span>{{ Number(settlementForm.currSetMoney).toFixed(2) }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="运输产品类别：" prop="transportProductName">
          <span>{{ settlementForm.transportProductName }}</span>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="10">
      <el-col :span="12">
        <el-form-item label="编制人：" prop="reportUsername">
          <span>{{ settlementForm.reportUsername }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="编制日期：" prop="reportTime">
          <span>{{ settlementForm.reportTime }}</span>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="10">
      <el-col :span="18">
        <el-form-item label="备注：" prop="remarks" class="ellipsis-3" :title="settlementForm.remarks">
          <span>{{ settlementForm.remarks }}</span>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
// import { dateFormat1, addUrlPerFix } from "@/basa/utils";
import jsList from "../js";

export default {
    props: {
        detail: {
            type: Object,
            default: () => {
            }
        },
        myId: {
            type: String
        },
        settlementForm: {
            type: Object
        }
    },
    data() {
        return {
            jsList,
            rules: {}
        };
    },
    created() {
        // this.init();
    },
    activated() {
        // this.init();
    },
    methods: {
        init() {
            // this.getUserInfo();
        },
        
        confirmSelect(val) {
            // this.demoUserMultiSelectTableTextarea = val
            //   .map(item => item.userName)
            //   .join("，");
        },
        
        handleChange(val) {
        }
    }
};
</script>

<style scoped lang="scss">
// .contractName {
//   min-width: 542px;
// }
.afterCurSettlePayAmtIncludeTax {
    position: absolute;
    top: -25px;
    left: 15px;
    color: #d8d8d8;
}

/deep/ .el-input {
    width: 260px;
}

/deep/ .el-button--single-number {
    width: 46px;
    margin-left: 10px;
    padding: 0 9px;
}

/deep/ .ccui-pre-form-item {
    .el-form-item__label {
        line-height: 16px;
    }
}

.remarkClass {
    /deep/ .el-form-item__content {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        white-space: normal;
        word-break: break-all;
        word-wrap: break-word !important;
    }
}
</style>
